<template>
    <div class="keypad">
        <button v-for="key in keys" :key="key.value" @click="handleClick(key.value)">
            {{ key.label }}
        </button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                inputValue: '',
                keys: [
                    { label: '1', value: '1' },
                    { label: '2', value: '2' },
                    { label: '3', value: '3' },
                    { label: '4', value: '4' },
                    { label: '5', value: '5' },
                    { label: '6', value: '6' },
                    { label: '7', value: '7' },
                    { label: '8', value: '8' },
                    { label: '9', value: '9' },
                    { label: '0', value: '0' },
                    { label: '00', value: '00' },
                    { label: '.', value: '.' },
                    { label: '⌫', value: 'delete' },
                    { label: '重输', value: 'reset' },
                    { label: '确定', value: 'confirm' }
                ]
            };
        },
        methods: {
            handleClick(value) {
                console.log(11122)
                switch (value) {
                    case 'delete':
                        this.inputValue = this.inputValue.slice(0, -1);
                        break;
                    case 'reset':
                        this.inputValue = '';
                        break;
                    case 'confirm':
                        this.$emit('queDing', this.inputValue);
                        break;
                    default:
                        this.inputValue += value;
                }
                console.log(this.inputValue)
                this.$emit('input-clicked', this.inputValue);
            }
        }
    };
</script>

<style scoped>
    .keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    button {
        padding: 10px 10px;
        font-size: 18px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
    }

    button:last-child {
        background-color: #ccc;
    }
</style>
